<script setup>
import MyNav from "../../../components/MyNav.vue";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {getResponseData} from "../../../util/request.js";
import {listRoleIdsApi, updateRolesApi} from "../../../api/ums/user.js";
import {isNotNull} from "../../../util/index.js";
import {simpleListApi} from "../../../api/axios.js";

// 获取当前用户主键和用户昵称
let userId = sessionStorage.getItem('userId');
let nickname = sessionStorage.getItem('nickname');

/* ==================== 页面常量 ==================== */

// 路径导航
const navItems = [
  {icon: 'User', label: '用户管理'},
  {icon: 'User', label: '用户列表', url: '/User'},
  {icon: 'UserFilled', label: '（' + nickname + '）的角色列表'},
];

/* ==================== 查询用户角色 ==================== */

// 当前用户拥有的全部角色列表 + 组件ElTransfer需要的key数组
let myRoleIds = ref([]);

/** 查询指定用户的全部角色ID列表 */
async function listMyRoleIds() {
  let data = getResponseData(await listRoleIdsApi(userId));
  if (isNotNull(data)) {
    myRoleIds.value = data;
  }
}

/* ==================== 查询全部角色 ==================== */

let allRoles = ref([]);

/** 查询全部角色列表并组装为 ElTransfer 需要的格式 */
async function listRoles() {
  let data = getResponseData(await simpleListApi(null, {module: 'role'}));
  if (isNotNull(data)) {
    for (let i in data) {
      allRoles.value.push({key: data[i]['id'], label: data[i]['title']});
    }
  }
}

/* ==================== 确认修改用户的角色 ==================== */

/** 修改当前用户的菜单列表 */
async function updateMyRoles() {
  let data = getResponseData(await updateRolesApi({
    id: userId,
    roleIds: myRoleIds.value
  }));
  if (isNotNull(data)) {
    ElMessage.success('角色列表更新成功！');
  }
}

/* ==================== 加载函数 ==================== */

onMounted(() => {
  listRoles();
  listMyRoleIds();
});

</script>

<template v-if="allRoles">
  <div class="user-roles-body">
    <my-nav :items="navItems"/>
    <el-divider/>
    <el-transfer v-model="myRoleIds"
                 filterable
                 filter-placeholder="输入角色名称"
                 :data="allRoles"
                 :titles="['全部可选角色', '当前已选角色']"
                 :props="{key: 'key', label: 'label'}"
                 :button-texts="['移除', '添加']"
                 @change="updateMyRoles"/>
  </div>
</template>

<style scoped lang="scss">
.user-roles-body {
  text-align: center; // 内容居中

  .update-menus-btn {
    margin-top: 20px; // 上外边距
    width: 87%; // 宽度
  }
}

/* 修改EL穿梭框高度 */
:deep(.el-transfer-panel), :deep(.el-transfer-panel__body) {
  width: 398px; // 宽度
  height: 530px; // 高度
}
</style>